<template>
    <div class="my_discovery">

    <!--轮播图-->
    <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" height="200px" width="100%"/>
  </van-swipe-item>
</van-swipe>
    <!--宫格导航-->
  
  <van-grid :border="false" :column-num="4">
  <van-grid-item v-for="item in gridDate" :key="item.id">
    <van-image :src="item.imgUrl" height="40px"/>
    <div class="grid_text">{{ item.text }}</div>
  </van-grid-item>
</van-grid>


<div class="music_list">
    <div class="text">发现好歌单</div>
    <van-button plain  round type="default" size="small">
        <span>查看更多</span>
    </van-button>
</div>
<div>
<!--歌单列表-->
<!-- 设置垂直间距 -->
<router-link to="/songdeyail">
<van-row :gutter="[20, 20]">
  <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
    <img :src="item.musicImg" alt="" width="100%" height="230px">
    <div>{{ item.auth }}</div>
    </van-col>
</van-row>
</router-link>
</div>

    </div>
</template>
<script setup>
import { ref } from "vue";
//歌单数据
const musicList = ref([
    {id:1,musicImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Zhg0lBBgRrqlEr6VkSlmfQHaNK?w=115&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'auth1'},
    {id:2,musicImg:'https://tse4-mm.cn.bing.net/th/id/OIP-C.begfR3MqOqg-U7Kuide-awHaLH?w=147&h=220&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'auth2'},
    {id:3,musicImg:'https://tse1-mm.cn.bing.net/th/id/OIP-C.v7-JBEgdnhzhwsMZsASH1QHaOf?w=115&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'auth3'},
    {id:4,musicImg:'https://tse2-mm.cn.bing.net/th/id/OIP-C.assdz81G6WQuebjI99zMJAHaKe?w=120&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',auth:'auth4'},
])
//
const gridDate = ref([
    {id:1,imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.q3MakEK_wVbZ687oArbuhwHaHa?w=172&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:'每日推荐'},
    {id:2,imgUrl:'https://tse1-mm.cn.bing.net/th/id/OIP-C.Mpxu7JOvmdmw3xGXNqSuaAHaHa?w=179&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:'私人FM'},
    {id:3,imgUrl:'https://tse1-mm.cn.bing.net/th/id/OIP-C.eLU7seVR1PKH4UWF_kNPfAHaHa?w=159&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:'歌单'},
    {id:4,imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.9eBr_2wq4sZvu-MFVkZKlwHaHa?w=175&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7',text:'排行榜'},
])
const images = [
    "https://ts1.cn.mm.bing.net/th/id/R-C.d91efb0d1c78d11f1fc8b782dea09f11?rik=RyheeXQ1w0k%2bWA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50107%2f4999.jpg_wh860.jpg&ehk=ZRyBNLkObbrCKP3bFumDtSUJVSeFPnjHV7GbDOMH1a0%3d&risl=&pid=ImgRaw&r=0",
    "https://img.51miz.com/Element/00/27/43/41/d3ec466a_E274341_26eac3ah.png",
    "https://ts1.cn.mm.bing.net/th/id/R-C.5d40fddcfedffe39f3fb39fa62dca6b2?rik=KstPbBC1woTtNg&riu=http%3a%2f%2fpic.616pic.com%2fbg_w1180%2f00%2f14%2f50%2fbi5w1CIVEC.jpg!%2ffw%2f1120&ehk=LqP56ahQhIXow704y7YyibyVN3LZOT9EzXPDoo%2bIxgQ%3d&risl=&pid=ImgRaw&r=0"

]

const toMusicList = (id)=>{
    
    console.log('跳转歌单',id);
}
</script>
<style scoped>

.my_discovery{
    margin-top: 10px;
    height: calc(100vh - 120px);
    overflow-y: scroll;
}
.music_list{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    margin-top: 10px;
}
.music_list .text{
    font-size: 18px;
    font-weight: 600;
    color: #000;
}
.music_list span{
    color: #000;
}
.grid_text{
    font-size: 12px;
}

</style>